<template>
  <UModal>
    <UTooltip :text="placeholder">
      <UButton class="w-55" variant="soft" size="xl" color="neutral">
        <UIcon name="mingcute:search-2-line" class="size-5"></UIcon>
        <span class="grow text-left">快速查询…</span>
      </UButton>
    </UTooltip>

    <template #content>
      <UInput
        icon="mingcute:search-2-line"
        :placeholder="placeholder"
        size="xl"
        variant="none"
        :ui="{
          root: 'w-full py-1'
        }"
      ></UInput>

      <div class="h-[60vh] overflow-auto">
        <UNavigationMenu
          color="neutral"
          orientation="vertical"
          :items="navigationMenu"
          class="w-full"
        ></UNavigationMenu>
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const placeholder = '可输入姓名、身份证、电话、案件编号等查询...'

const navigationMenu = ref<NavigationMenuItem[][]>([
  [
    {
      type: 'label',
      label: '姓名'
    },
    {
      label: '莫俊宇',
      icon: 'i-mingcute:user-1-line',
      onSelect: () => {}
    },
    {
      type: 'label',
      label: '身份证'
    },
    {
      label: '440181199506113213',
      icon: 'i-mingcute:bank-card-line',
      onSelect: () => {}
    },
    {
      type: 'label',
      label: '电话'
    },
    {
      label: '131607232321',
      icon: 'i-mingcute:phone-line',
      onSelect: () => {}
    },
    {
      type: 'label',
      label: '案件编号'
    },
    {
      label: '131607232321',
      icon: 'i-mingcute:file-info-line',
      onSelect: () => {}
    }
  ]
])
</script>
